<!--  -->
<template>
  <div class="share-content">
    <div class="share-bg" v-if="!new_coupon">
      <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/couponV2/coupons-bg.png" />
      <div class="share-user  flex-a-c">
        <div class="share-head flex-a-c flex-j-c">
          <img :src="image" alt />
        </div>
        <h3 class="ell">{{ shareInfo.name }}</h3>
        <template v-if="shareInfo.coupon_method">
          <div class="price" v-if="shareInfo.coupon_method == 1"><span>{{ $i18n.t("money") }}</span>{{ parseFloat(shareInfo.deduct) || '0' }}</div>
          <div class="price" v-if="shareInfo.coupon_method == 2">{{ parseFloat(shareInfo.discount) || '-' }}折</div>
        </template>
        <div class="price" v-if="shareInfo.discount && !shareInfo.coupon_method">{{ shareInfo.discount }}</div>
        <p class="explain" v-if="shareInfo.coupon_method == 1">满{{ shareInfo.enough }}元可用</p>
        <p class="explain" v-else-if="shareInfo.coupon_method == 2">满{{ shareInfo.enough }}立享</p>
        <p class="explain" v-else>满{{ shareInfo.enough }}元可用</p>
        <div class="begin-time">
          <p v-if="shareInfo.time_start">有效期：{{ shareInfo.time_start }}-{{ shareInfo.time_end }}</p>
          <p v-if="shareInfo.start">有效期：{{ shareInfo.start }}-{{ shareInfo.end }}</p>
          <p v-if="nums">券张数：{{nums}}张</p>
          <p v-else>券张数：{{ shareInfo.num }}张</p>
        </div>
      </div>
    </div>
    <div class="share-bg" v-if="new_coupon">
      <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/couponV2/coupons-bg.png" />
      <div class="share-user  flex-a-c">
        <div class="share-head flex-a-c flex-j-c">
          <img :src="image" alt />
        </div>
        <h3 class="ell">{{ shareInfo.coupon_name || shareInfo.name }}</h3>
        <template v-if="shareInfo.discount_rule_str">
          <div class="price">
            <span v-if="shareInfo.discount_rule_str.is_price == 1">{{ $i18n.t("money") }}</span>
            <span style="font-size: 2.5rem;">{{ shareInfo.discount_rule_str.discount }}</span>
            <span class="small" v-if="shareInfo.discount_rule_str.is_rebate == 1">折</span>
          </div>
          <p class="explain">{{ shareInfo.discount_rule_str.desc }}</p>
        </template>
        
        <!-- <p class="explain" v-else-if="shareInfo.coupon_method == 2">满{{ shareInfo.enough }}立享</p> -->
        <!-- <p class="explain" v-else>满{{ shareInfo.enough }}元可用</p> -->
        <div class="begin-time">
          <p v-if="shareInfo.time_start">有效期：{{ shareInfo.time_start }}-{{ shareInfo.time_end }}</p>
          <p v-if="shareInfo.start">有效期：{{ shareInfo.start }}-{{ shareInfo.end }}</p>
          <p v-if="shareInfo.validity_period">有效期：{{shareInfo.validity_period}}</p>
          <p v-if="nums">券张数：{{nums}}张</p>
          <p v-else>券张数：{{ shareInfo.num }}张</p>
        </div>
      </div>
    </div>
    <slot name="shareBtn"></slot>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name:'',
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props:{
    shareInfo:{
      type:Object,
      default:() => {
        return {}
      }
    },
    image:String,
    nums:Number,
    new_coupon:Boolean,
  },
  data() {
  return {

  };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    shareInfo:function(nval,oval){
      console.log(nval)
    }
  },
  //方法集合
  methods: {

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 定义显示的行数 */
  overflow: hidden;
}
.share-content  {
  background: linear-gradient(1deg, #F5F5F5 0%,#F5F5F5 3.75rem,#FD4963 19.125rem, #FD4963 100%);
  padding:1.875rem 0rem 0  0;
  .share-bg {
    position: relative;
    img {
      width:100%;
      height: auto;
    }
    .share-user {
      position: absolute;
      top:0rem;
      left:50%;
      width:65%;
      height: 100%;
      transform: translateX(-50%);
      flex-direction: column;
      .share-head {
        width: 3.375rem;
        height: 3.375rem;
        background-color: #fff;
        border-radius: 50%;
        img {
          width: 3.125rem;
          height: 3.125rem;
          border-radius: 50%;
          display: block;
        }
      }
      h3 {
        padding:0.6875rem 0 0 0;
        font-weight: bold;
        color: #00001C;
      }
      .price {
        font-weight: bold;
        color: #F15353;
        font-size: 2.5rem;
        line-height: 2.5rem;
        padding:0.9375rem 0 0rem 0;
        span {
          font-size: 1.5625rem;
        }
      }
      .explain {
        color: #F15353;
        font-size: 0.8125rem;
        padding:0.4375rem 0 0 0;
      }
      .begin-time {
        // padding:1.5625rem 0 0 0 ;
        position: absolute;
        bottom:3.125rem;
        p {
          font-size: 0.8125rem;
          font-weight: 400;
          color: #FFFFFF;
          &:nth-child(1) {
            padding:0 0 0.3125rem 0;
          }
        }
      }
    }
  }
  .share-btn {
    cursor: pointer;
    margin:0 2rem;
    font-size: 0.9375rem;
    line-height: 0.9375rem;
    font-weight: 500;
    color: #FFFFFF;
    padding:0.9375rem 0;
    border-radius: 1.375rem;
    background: linear-gradient(179deg, #FFC8B4 0%, #FF3653 100%);
  }
}
</style>